<template>
  <div class="kanban-container-main">
    <div class="main-header">
      <div class="main-header-left">
        <span class="year">{{ formateTimeStamp(new Date().getTime()) }}</span>
        <span id="nowtime" class="nowtime"></span>
      </div>
      <div class="main-header-center">
        <span>xxx市系统监测大屏</span>
      </div>
      <div class="main-header-right" title="返回主页" @click="back($router)">
        <el-icon color="#76abe8"><SwitchButton /></el-icon>
      </div>
    </div>
    <div class="main-content">
      <div class="main-content-left">
        <LeftHome />
      </div>
      <div class="main-content-center">
        <CenterHome />
      </div>
      <div class="main-content-right">
        <RightHome />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'

import { SwitchButton } from '@element-plus/icons-vue'

import { formateTimeStamp, back, getNowTime } from '@/utils'
import CenterHome from './components/Center/CenterHome.vue'
import LeftHome from './components/Left/LeftHome.vue'
import RightHome from './components/Right/RightHome.vue'

let timer: Nullable<NodeJS.Timeout> = null
onMounted(() => {
  if (timer) clearInterval(timer)
  timer = setInterval(() => {
    getNowTime('nowtime')
  }, 20)
})
</script>

<style scoped lang="scss">
$headerHeight: 7vh;

.kanban-container-main {
  width: 100%;
  height: 100vh;
  background: url('@/assets/kanban/image.png') no-repeat;
  background-size: 100% 100%;
  overflow: hidden;

  .main-header {
    width: 100%;
    height: $headerHeight;
    background: url('../../assets/kanban/bg/top-bg.png') no-repeat;
    background-size: 100% 100%;
    position: relative;

    &-right {
      position: absolute;
      right: 10%;
      top: 5px;
      font-size: 0.3rem;
      &:hover {
        cursor: pointer;
      }
    }

    &-center {
      position: absolute;
      left: 50%;
      top: 20px;
      transform: translateX(-50%);
      font-size: 0.36rem;
      color: #6bddee;
    }

    &-left {
      position: absolute;
      left: 3%;
      top: 12px;
      color: #76abe8;
      font-size: 0.26rem;
      .year {
        padding-right: 10px;
      }
    }
  }

  .main-content {
    width: 100%;
    height: calc(100% - $headerHeight);
    display: flex;
    padding-left: 20px;
    padding-right: 20px;

    &-left {
      width: 30%;
    }

    &-center {
      width: 40%;
      margin-left: 10px;
      margin-right: 10px;
    }

    &-right {
      width: 30%;
    }
  }
}
</style>
